<template>
    <div class="showCar-Container"> 
        <div class="car_list">
            <el-table
                :data="carList"
                border
                style="width: 100%"
                empty-text="暂无商品"
                @selection-change="getSum"><!--添加获得总价事件-->

                <el-table-column
                align="center"
                type="selection">
                </el-table-column>

                <el-table-column
                    align="center"
                    type="index"
                    label="序号">
                </el-table-column> 

                <el-table-column
                    align="center"
                    prop="book_name"
                    label="商品名称">
                </el-table-column>

                <el-table-column
                    align="center"
                    label="商品照片">
                    <template slot-scope="scope">
                        <img :src="require('@/assets/images/books/'+scope.row.book_image)" class="image">
                    </template>    
                </el-table-column>

                <el-table-column
                    align="center"
                    prop="book_price"
                    label="单价">
                </el-table-column>
                
                <el-table-column
                    align="center"
                    prop="car_count"
                    label="购买数量">
                    <template slot-scope="scope">
                        <el-input-number size="small" v-model="scope.row.car_count" :min="1" @change="updateCarCount(scope.row)"></el-input-number>
                    </template>
                </el-table-column>            

                <el-table-column
                    align="center" 
                    label="总计">
                    <template slot-scope="scope">
                        {{ scope.row.car_count* scope.row.book_price }}
                    </template>
                </el-table-column>  
                
                <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除购物车内该商品吗?"
                            @confirm="delCarByBookId(scope.row)">
                            <el-button type="danger" icon="el-icon-delete" slot="reference" plain>删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>  
            </el-table>
        </div>
        <div class="down">
            <div class="carSum">
            <label style="color: black">合计:</label>
            <label style="color: red; margin-top: 20px; font-size: 10px ;">￥</label>
            <label style="color: red;">{{ sum }}</label>
            <el-button type="warning" size="small" round style="margin-right: 80px; margin-left: 10px;font-size: 15px;" :disabled="sum==0?true: false">&nbsp;结算&nbsp;</el-button>
                <el-button type="warning" size="small" round style="margin-right: 80px; margin-left: 10px;font-size: 15px;" :disabled="sum == 0 ? true : false">&nbsp;结算&nbsp;</el-button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            carList:[],//购物车列表
            sum:0,
            salBooks:[],//要购买商品的数组
        }
    },methods:{
        /**
         * 获得购物车信息
         */
          queryCars(){
            this.$axios
                .get('car/queryCarInfo')
                .then(response=>{
                    this.carList=response.data;
                })
                .catch(error=>{
                    console.log(error)
                })
          },
          /**
           * 修改购物车商品数量
           * @param {*} book_id 
           * @param {*} currentCount 
           */
          updateCarCount(row){
            this.$axios
                .put('car/updateCarCount',
                {"book_id":row.book_id,
                "car_count": row.car_count})
                .then(response => {
                    let result=response.data;
                    if(result.success){
                        // this.queryCars();
                        row.total=row.book_price*row.car_count;
                        //清空原来总价
                        this.sum =0;
                        //改变总价格，如果修改数量商品时被修改的才修改总价格
                        for(let salBook of this.salBooks){
                                //改变价格
                                this.sum =this.sum +salBook.book_price*salBook.car_count;    
                        }

                    }else{
                         this.$notify.error({
                            title: '错误',
                            message: '请输入有效数字'
                        });
                    }
                })
                .catch(error => {
                    console.log(error)
                })
          },
          /**
           * 根据id删除对应商品
           */
          delCarByBookId(row){
            this.$axios
                .delete('car/delCarByBookId?book_id='+row.book_id)
                .then(response => {
                    let result = response.data;
                    if (result.success) {
                         this.queryCars();
                    
                          this.$notify({
                            title: '成功',
                            message: '删除成功',
                            duration: 300,
                            type: 'success'})
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '删除失败',
                            duration:300,
                        });
                    }
                })
                .catch(error => {
                    console.log(error)
                })
          }, 
          getSum(selection){
                //将选择商品赋给数组
                this.salBooks=selection;
                this.sum=0;
                //遍历选择的项并计算价格
                for(let row of selection){
                    this.sum= this.sum+row.book_price*row.car_count;
                }
          }
          
    },created(){
           this.queryCars();
    }
}
</script>

<style scoped>
.showCar-Container{
     margin:0;padding:0;height:100%;width:100%;
    
}
.down{
        position:fixed;
        bottom:0px;
        width:100%;
        height: 50px;
        background-color:rgba(0, 0, 0, 0.3);
        /* opacity: 0.3; */
        text-align: right;
        
}
.carSum{
    margin: 10px auto;
}
 .image{
    width: 80px;
    height: 80px;
 }


</style>